<template>
  <!-- 只有在非登录页面时才显示布局 -->
  <div v-if="!isLoginPage" class="common-layout">
    <el-container style="min-height: 100vh;">
      <el-header style="background-color: #409EFF; color: white; height: 60px;">
        <Header @toggle-collapse="handleToggleCollapse"></Header>
      </el-header>
      <el-container>
        <el-aside :width="asideWidth" style="background-color: #545c64; transition: width 0.3s ease;">
          <Aside :is-collapse="isCollapse" :is-transitioning="isTransitioning"></Aside>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>

  <!-- 如果是登录页面，则只显示 router-view 内容 -->
  <router-view v-else />
</template>

<script>
import Aside from './components/Aside.vue';
import Header from './components/Header.vue';

export default {
  components: {
    Header,
    Aside
  },
  data() {
    return {
      isCollapse: false,
      isTransitioning: false, // 标记是否正在过渡动画中
      asideWidth: '200px'     // 动态控制宽度
    };
  },
  computed: {
    isLoginPage() {
      return this.$route.meta.hideLayout;
    }
  },
  methods: {
    handleToggleCollapse() {
      if (this.isTransitioning) return; // 防止重复点击

      this.isTransitioning = true;

      if (!this.isCollapse) {
        // 先折叠菜单内容（200ms 动画）
        this.isCollapse = true;

        // 延迟 200ms 后再收缩宽度
        setTimeout(() => {
          this.asideWidth = '64px';
          this.isTransitioning = false;
        }, 200);
      } else {
        // 先展开宽度
        this.asideWidth = '200px';

        // 延迟 200ms 后再展开菜单内容
        setTimeout(() => {
          this.isCollapse = false;
          this.isTransitioning = false;
        }, 200);
      }
    }
  }
};
</script>